<template>
  <view class="page-container">
    <uni-ele-form :fields="formFields" :rules="rules" :source="item" labelWidth="200px" refName="profile"
                  title="个人资料信息" @submit="submit">
    </uni-ele-form>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex';

export default {
  data() {
    return {
      item: {},
      rules: {
        mobile: [{
          required: true,
          message: '请输入手机号码',
          trigger: 'blur'
        },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        sex: [{
          required: true,
          message: '请选择性别',
          trigger: 'change'
        }],
        status: [{
          required: true,
          message: '请选择状态',
          trigger: 'change'
        }],
        dateTimePicker: [{
          required: true,
          message: '请选择时间',
          trigger: 'change'
        }],
      },
      formFields: [{
        title: "用户名:",
        valueType: "text",
        value: "username",
        width: "250px"
      },
        {
          title: "姓名:",
          valueType: "text",
          value: "name",
          width: "250px"
        },
        {
          title: "手机号码",
          valueType: "input",
          value: "mobile",
          editDisabled: true,
          width: "250px",
          maxlength: 11
        },
        {
          title: "性别",
          valueType: "radio",
          value: "sex",
          width: "250px",
          options: [{
            name: '男',
            value: "0"
          },
            {
              name: '女',
              value: "1"
            }
          ]
        },
        {
          title: "状态",
          valueType: "select",
          value: "status",
          width: "250px",
          // filterable: true,
          // multiple: true,
          options: [{
            name: '全部',
            value: "0"
          },
            {
              name: '成功',
              value: "1"
            },
            {
              name: '失败',
              value: "2"
            }
          ]
        },
        {
          title: "起止时间",
          valueType: "datetimerange",
          value: "dateTimePicker",
          format: "yyyy-MM-dd HH:mm:ss",
          date: true
        },
        {
          title: "日期时间",
          valueType: "datetime",
          value: "dateTime",
          format: "yyyy-MM-dd HH:mm:ss",
          date: true
        },
        {
          title: "日期",
          valueType: "date",
          value: "date",
          format: "yyyy-MM-dd",
          date: true
        },
        {
          title: "日期区间",
          valueType: "daterange",
          value: "datePicker",
          format: "yyyy-MM-dd",
          date: true
        },
        {
          title: "图片",
          valueType: "upload",
          value: "images",
          limit: 15,
          accept: "image/png, image/jpeg",
          fileList: [],
          avatar: false,
          /* 最大1M */
          maxSize: 1,
          uploadUrl: "http://127.0.0.1:4523/mock/1550228/common/upload"
        }
      ]
    }
  },
  onLoad() {
    this.item = {
      username: this.userInfo.username,
      name: this.userInfo.name,
      mobile: this.userInfo.mobile
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    submit(e) {
      console.log(e);
      this.$utils.notify("保存成功");
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
